//延迟操作：等待整个页面全部加载完毕后，再执行监听事件或者是交互事件
$(document).ready(function (){
    //当用户点击时得到用户输入的内容
    $(".btn").bind("click",function (){
        //1.获取到用户输入的内容
        var content = $(".text").val();
        console.log(content);
        //2装备请求参数，携带用户的输入内容请求到服务器
        var config={
            url:"baidu_ai?model=nlp&type=depParser&content="+content,
            method:"GET",
            dataType:"json",
            data:{},
            success:function (resp){
                //处理成功结果
                console.log(resp);
                //动态的通过标签获取到页面的控件，动态设置页面数据
                for (let i = 0; i < resp.items.length; i++) {

                    var msgDiv = document.createElement("div");
                    msgDiv.id = "msgDivId";
                    //盒子的内容
                    var v = "<span style='color: #20161b;font-size: 25px;font-weight: bold'>词与父节点的依存关系:</span>" + resp.items[i].deprel + "<span>&nbsp;&nbsp;&nbsp;</span>" +
                        "<span style='color: #20161b;font-size: 25px;font-weight: bold'>词的父节点ID:</span>" + resp.items[i].head + "<span>&nbsp;&nbsp;&nbsp;</span>" +
                        "<span style='color: #20161b;font-size: 25px;font-weight: bold'>词的ID:</span>" + resp.items[i].id + "<span>&nbsp;&nbsp;&nbsp;</span>" + "<span style='color: #20161b;font-size: 25px;font-weight: bold'>词性:</span>" +
                        resp.items[i].postag
                        + "<span>&nbsp;&nbsp;&nbsp;</span>" + "<span style='color: #20161b;font-size: 25px;font-weight: bold'>词:</span>" + resp.items[i].word + "<span>&nbsp;&nbsp;&nbsp;</span><input style='width: 100px;font-weight: bold; height: 60px;font-size: 30px;float: right;'  onclick='sc()' type='button' value='删除'>";

                    var str = v

                    msgDiv.innerHTML = str;
                    // $(".basic_words").html(resp.items[i].basic_words);
                    // $(".byte_length").html(resp.items[i].byte_length);
                    // $(".byte_offset").html(resp.items[i].byte_offset);
                    // $(".item").html(resp.items[i].item);
                    // $(".pos").html(resp.items[i].pos);
                    document.body.appendChild(msgDiv);
                }
                //$(".abstract").text(resp.items[0].abstract);
            },
            error:function (resp){
                console.log(resp);
            }

        };
        $.ajax(config);
    })
});
function sc() {
    var msgDiv = document.getElementById("msgDivId");
    document.body.removeChild(msgDiv);
}